<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
		<title>编辑发布</title>
		<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/app.css" />
		<style type="text/css">
		body {
			background-color: #F5F5F5;
		}

		input[type="text"] {
			height: 2.5rem;
		}

		textarea {
			padding-top: 0.85rem;
			height: 8rem;
		}

		.biaoti textarea {
			height: 4rem;
		}

		::placeholder:nth-child(1) {
			font-size: 1rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(187, 187, 187, 1);
		}

		::placeholder:nth-child(2) {
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(187, 187, 187, 1);
		}

		.aui-row {
			margin: 0.75rem 0.25rem;
		}

		.aui-row img {
			border-radius: 0.25rem;
		}

		.aui-row .img {
			object-fit: cover;
			width: 100%;
			height: calc((100vw - 0.5rem) / 3 - 0.5rem);
		}

		.aui-row-padded [class*=aui-col-xs-] {
			padding: 0.25rem;
		}

		.aui-btn-block {
			width:92%;
			height:2.3rem;
			background:rgba(0,90,147,1);
			color:#ffffff;
			margin: auto;
			border-radius:0.3rem;
		}

		.btn {
			/*padding: 4.5rem 0.5rem 2rem 0.5rem;
				width: 100%;*/
		}

		.btn-delete {
			position: absolute;
			width: 1rem;
			right: 0rem;
			top: -.5rem;
			z-index: 20;
		}

		.aui-row {
			overflow: unset;
		}

		.aui-dialog-body {
			overflow: auto !important;
			max-height: 60vh !important;
		}

		.biaoti textarea::placeholder {
			color: #BBBBBB;
			font-size: 1rem;
		}

		.count {
			position: absolute;
			display: inline-block;
			right: 0.3rem;
			width: 1.8rem;
			height: 0.85rem;
			font-size: 0.6rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(187, 187, 187, 1);
			line-height: 0.85rem;
			bottom: 0.55rem;
			border-bottom: none;
			padding-bottom: 0.75rem;
		}
		textarea{
			width:17.25rem;
			height:5.05rem;
		}
		</style>

	</head>

	<body>
		<div id="app" v-cloak="">
			<div class="" style="position: fixed;background-color: #ffffff;height: 2px;width: 100%;"></div>
			<div class="ming-bg-white">
				<div class="" style="width:100%;position:relative;padding:0 0.75rem 0 0.75rem;margin-bottom:0.75rem;">
					<textarea v-model="title" placeholder="添加标题" @input="descInput" maxlength="30" style="border-bottom:1px solid rgba(238,238,238,0.5);;font-size:1rem;font-family:PingFangSC-Medium;font-weight:500;color:rgba(34,34,34,1);"></textarea>
					<span class="count">{{remat}}/30</span>
				</div>
				<div class="" style="width:100%;background-color:#fff;">
					<textarea v-model="content" placeholder="说说你的想法吧~" maxlength="1000" style="font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);padding:0 .75rem;overflow-y:scroll;"></textarea>
					<!-- 添加图片 -->
					<div class="" style="background-color:#fff;display:inline-block;width:100%;margin-left:-.08rem;padding:0 .75rem;padding-top:1rem;">
						<div v-for="(vo,index) in imgpath" class="aui-col-xs-2 ming-pr" style="width:20%;margin-bottom:.8rem;">
							<img class="img" :src="vo" style="width:3rem;height:3rem;border-radius:0.2rem;flex-shrink:0">
							<img class="btn-delete" src="../../../image/btn/btn-close-hui.png" tapmode @click="delimg(index)" style="width:0.8rem;">
						</div>
						<!-- 添加商品的图标 -->
						<div v-if="img.length<3" class="aui-col-xs-2 ming-pr" tapmode onclick="set_pic()" style="width:20%;">
							<img src="../../../image/bg/addpicture.png" style="height:3rem;margin-bottom:.5rem;" />
						</div>
					</div>
				</div>
			</div>

			<div class="aui-clearfix"></div>
			<div class="" tapmode onclick="xyqPublish()" style="text-align:center;position:fixed;bottom:0rem;z-index:-1;display:inline-block;width:100%;height:2.45rem;background:rgba(255,255,255,1);">
				<div class="aui-btn aui-btn-block">
					发布
				</div>
			</div>

			<!-- <div v-show="!is_agree" class="">
				<div class="aui-mask aui-mask-in"></div>
				<div class="aui-dialog aui-dialog-in" style="top: 50%;transform: translate(0,-50%) !important;">
					<div class="aui-dialog-header">发布协议</div>
					<div class="aui-dialog-body">
						<div class="" v-html="xieyi"></div>
					</div>
					<div class="aui-dialog-footer">
						<div class="aui-dialog-btn" tapmode onclick="close_win()">不同意</div>
						<div class="aui-dialog-btn" tapmode onclick="agree()">同意</div>
					</div>
				</div>
			</div> -->
		</div>
	</body>
	<script type="text/javascript" src="../../../script/api.js"></script>
	<script type="text/javascript" src="../../../script/vue.js"></script>
	<script type="text/javascript" src="../../../script/common.js"></script>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				id:0,
				title: '',
				content: '',
				img: [],
				imgpath: [],
				remat: 30
			},
			methods: {
				descInput: function(){
					var textVal = this.title.length;
					this.remat = 30-textVal;
				},
				delimg: function(index) {
					vm.img.splice(index, 1)
					vm.imgpath.splice(index, 1)
				},
				get_list: function() {
					get_data('api/xiaoyouquan/xyqDetail',{
						token:$api.getStorage('token'),
						id:vm.id
					},function(ret){
						if (ret.status) {
							vm.title = ret.data.title;
							vm.content = ret.data.content;
							vm.img = ret.data.img.split(',');
							vm.imgpath = ret.data.img_path;
						}
					})
				}
			}
		})
		apiready = function() {
			vm.id = $api.getStorage('id')
			vm.get_list()
		};

		function set_pic() {
			var max = 3 - vm.img.length;
			if(max < 1) {
				return;
			}
			select_album(max, function(ret) {
				var pic_path = ret.path
				post_img('api/UpFiles/upload', pic_path, function(ret) {
					vm.img.push(ret.data.pic_id);
					vm.imgpath.push(ret.data.url);
				})
			})
		}

		function xyqPublish() {
			if(vm.title == '') {
				toast('请输入标题');
				return;
			}
			if(vm.content == '') {
				toast('请输入内容');
				return;
			}
			get_data('api/xiaoyouquan/xyqEditPublish', {
				token: $api.getStorage('token'),
				id: vm.id,
				title: vm.title,
				content: vm.content,
				img: vm.img.join(',')
			}, function(ret) {
				toast(ret.msg)
				if(ret.status) {
//					发送事件给列表页面,告诉页面文章编辑过了
					send_event('xyqedit')
					delay_close()
				}
			})
		}
	</script>

</html>
